<template>
    <div class="header">
        <div class="logo">
            <img src="@/assets/image/home/logo.jpg" alt="">
            <div class="logo-title">预约挂号</div>
        </div>
        <div class="nav">
            <ul class="navbar">
                <li>首页</li>
                <li @click="toAppointment">预约挂号</li>
                <li @click="toUserCenter">个人中心</li>
                <li>帮助中心</li>
            </ul>
        </div>
        <div class="person">
            <el-avatar 
                :size="50" 
                :src="avatarUrl" 
                class="avatar"
                @click="toUserCenter"
            />
            <el-button type="danger" size="small" @click="logout">退出登录</el-button>
        </div>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, onMounted, reactive, ref, toRefs } from 'vue';
import { useRouter } from 'vue-router'
import { getUser } from '@/api/getInfo';
const router = useRouter()
defineOptions({
    name: 'Header'
})

// 生日
const birth = ref(null)
// 性别
const gender = ref(null)

// 获取用户信息
const getAgeAndGender = async () => {
    try {
        const response = await getUser({
            id: sessionStorage.getItem('user_id')
        })
        const { birthday, sex } = response.data[0]
        birth.value = birthday.slice(0,10)
        gender.value = sex
    }
    catch {}
}

// 年龄
function checkAge(birthday) {
    // 将生日字符串转换为 Date 对象
    const birthDate = new Date(birthday)
    // 获取当前日期
    const today = new Date()
    // 计算年龄
    let age = today.getFullYear() - birthDate.getFullYear()
    const monthDiff = today.getMonth() - birthDate.getMonth()
    // 如果当前月份小于生日月份，或者当前月份等于生日月份但日期小于生日日期，则年龄减一
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
        age--
    }
    return age
}

// 用户头像
const avatarUrl = computed(()=>{
    if(gender.value == 'M') {
        if(checkAge(birth.value) <18 ) {
            return require('@/assets/svg/userAvatar_svg/boy.svg')
        }
        if(checkAge(birth.value) >=18 && checkAge(birth.value) <60) {
            return require('@/assets/svg/userAvatar_svg/man.svg')
        }
        if(checkAge(birth.value) >=60) {
            return require('@/assets/svg/userAvatar_svg/oldMan.svg')
        }
    } else {
        if(checkAge(birth.value) <18 ) {
            return require('@/assets/svg/userAvatar_svg/girl.svg')
        }
        if(checkAge(birth.value) >=18 && checkAge(birth.value) <60) {
            return require('@/assets/svg/userAvatar_svg/woman.svg')
        }
        if(checkAge(birth.value) >=60) {
            return require('@/assets/svg/userAvatar_svg/oldWoman.svg')
        }
    }
})

// 去用户中心
const toUserCenter = () => {
    router.push('/user-center')
}

// 去预约
const toAppointment = () => {
    router.push('/appointment')
}

// 退出登录
const logout = () => {
    ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        sessionStorage.removeItem('token')
        sessionStorage.removeItem('auth')
        sessionStorage.removeItem('username')
        sessionStorage.removeItem('user_id')
        ElMessage({
            type: 'success',
            message: '退出登录成功'
        });
        router.push('/login')
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消退出'
        });
    });
}

onMounted(()=>{
    getAgeAndGender()
})
</script>

<style lang="scss" scoped>
    .header {
        width: 100%;
        height: 70px;
        background-image: linear-gradient(to top, #117DD8, #258AD2);
        display: flex;
        justify-content: space-between;

        .logo {
            height: 100%;
            width: 370px;
            width: auto;
            display: flex;
            cursor: default;
            img {
                height: 100%;
                background-size: cover;
            }
            .logo-title {
                height: 100%;
                color: white;
                font-size: 50px;
                white-space: nowrap;
            }
        }

        .nav {
            flex: 0 1 auto;
            .navbar {
                list-style-type: none; /* 去掉默认的列表样式 */
                margin: 0; /* 去掉外边距 */
                padding: 0; /* 去掉内边距 */
                display: flex; /* 使用 Flexbox 布局 */
                justify-content: space-between; /* 项目之间留白 */
                align-items: center;

                li {
                    font-size: 24px;
                    display: flex; /* 使用 Flexbox 布局 */
                    align-items: center; /* 垂直居中对齐 */
                    justify-content: center; /* 水平居中对齐 */
                    // height: 100%; /* 设置 li 的高度与 navbar 相同 */
                    padding: 19px 15px; /* 左右内边距 */
                    color: white; /* 链接颜色 */
                    cursor: pointer; /* 鼠标悬停时显示为指针 */
                    transition: background-color 0.3s; /* 背景颜色过渡效果 */
                    white-space: nowrap;
                    box-sizing: border-box;
                    &:hover {
                        background-color: #409EFF; /* 悬停时的背景颜色 */
                    }
                }
            }
        }

        .person {
            width: 370px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            .avatar {
                cursor: pointer;
            }
        }
    }
</style>